<template>
  <div class="loading-mask">
    <div class="circular">
      <svg class="anim-rotate" width="40" height="40">
        <circle class="anim-circle" cx="20" cy="20" r="13" fill="#fff" stroke="#72a5ef" stroke-width="3"></circle>
      </svg>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'Loading',
    props: {
      'show': Boolean
    },
    updated () {
      if (this.show) {
        document.body.addEventListener('touchmove', (e) => e.preventDefault())
      } else {
        document.body.removeEventListener('touchmove', (e) => e.preventDefault())
      }
    }
  }
</script>
<style lang="scss" scoped>
  @import '../../assets/css/function.scss';
  .loading-mask{
    position: fixed;
    z-index: 99;
    top: 0;
    left: 0;
    bottom: 0; 
    right: 0;
    .circular{
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0; 
      right: 0;
      margin: auto;
      width: 40px;
      height: 40px;
      background: #fff;
      border-radius: 50%;
      box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.2);
    }
  }
</style>

